<template>
  <div>
    <div>
      <a-spin :spinning="loading">
        <a-form :form="form" @submit="handleSubmit">
          <a-form-item label="账号" v-bind="formItemLayout">
            <a-input disabled :value="user.username"></a-input>
          </a-form-item>
          <a-form-item label="昵称" v-bind="formItemLayout">
            <a-input v-decorator="formModel.nickname"></a-input>
          </a-form-item>
          <a-form-item v-bind="tailFormItemLayout">
            <a-button type="primary" html-type="submit" :loading="loading">
              更新基本信息
            </a-button>
          </a-form-item>
        </a-form>
      </a-spin>
    </div>
  </div>
</template>

<script>
import { fetchInfo, updateInfo } from "@/api/auth";

export default {
  data() {
    return {
      loading: true,
      user: {
        nickname: "",
        username: ""
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 2 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 2
          }
        }
      },
      formModel: {
        nickname: [
          "nickname",
          {
            rules: [
              {
                required: true,
                message: "请输入昵称!",
                whitespace: true
              }
            ]
          }
        ]
      }
    };
  },
  created() {
    fetchInfo().then(res => {
      this.loading = false;
      this.user = res.data.user;
      this.formModel.nickname[1].initialValue = this.user.nickname;
    });
    this.form = this.$form.createForm(this);
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.loading = true;

          //添加
          updateInfo(values)
            .then(res => {
              this.loading = false;
              this.$emit("success", res);
            })
            .catch(error => {
              this.loading = false;
              this.$common.validateExtend(error, this.form);
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
